<template>
  <div>

    <div class="row">
        <div class="col-md-12">
          <!-- BEGIN EXAMPLE TABLE PORTLET-->
          <div class="portlet box grey-cascade">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-globe"></i>{{this.title}}
              </div>
             <div class="cz">

                <button id="sample_editable_1_new" class="btn green" data-toggle="modal" href="#addData">新增 <i class="fa fa-plus"></i></button>
                <button id="sample_editable_1_new" style="margin-right: 10px;" class="btn red" data-toggle="modal"  @click="allDelete()">批量删除 <i class="fa fa-trash-o"></i></button>
                <div class="btn-group pull-right ">
                  <button class="btn dropdown-toggle" data-toggle="dropdown">工具 <i class="fa fa-angle-down"></i>
                  </button>
                  <ul class="dropdown-menu pull-right style">
                    <li>
                      <a href="javascript:;">
                      打印 </a>
                    </li>
                    <li>
                      <a href="javascript:;">
                      另存为PDF </a>
                    </li>
                    <li>
                      <a href="javascript:;">
                      导出为Excel </a>
                    </li>
                  </ul>
                </div>
            
              </div>

            </div>
            <div class="portlet-body">
              <div class="row m0" style="margin-bottom: 10px;">
                <div class="col-md-3 mb10" style="padding-left: 0;">
                  <select data-v-912aa5a4="" class="bs-select form-control" style="margin-right: 25px;">
                    <option data-v-912aa5a4="">全部</option> 
                    <option data-v-912aa5a4="">1号水泵</option> 
                    <option data-v-912aa5a4="">2号水泵</option>
                  </select>
                </div>
                <div class="col-md-3 mb10">
                  <select data-v-912aa5a4="" class="bs-select form-control" style="margin-right: 25px;">
                    <option data-v-912aa5a4="">全部</option> 
                    <option data-v-912aa5a4="">1号水泵</option> 
                    <option data-v-912aa5a4="">2号水泵</option>
                  </select>
                 
                </div>

                <label class="control-label style" style="float: left;position: relative;top: 5px;">起止日期 :</label>
                  <div class="col-md-4">
                    <div class="input-group input-large date-picker input-daterange" data-date="10/11/2012" data-date-format="mm/dd/yyyy">
                      <input type="text" class="form-control" name="from">
                      <span class="input-group-addon">
                      to </span>
                      <input type="text" class="form-control" name="to">
                    </div>

                  </div>
                 <button class="btn green">查询 <i class="fa fa-search"></i></button>
             
              </div>
              <div class="tableDiv">
                <table class="table table-striped table-bordered table-hover" style="color: #333;font-weight: 500;" id="sample_3">
                  <thead>
                    <tr>
                     <th class="table-checkbox">
                      <input type="checkbox" class="group-checkable" data-set="#sample_3 .checkboxes"/> 全选
                     </th>
                      <th>
                         报修id
                      </th>
                      <th>
                         报修类型
                      </th>
                      <th>
                         具体类别
                      </th>
                      <th>
                         上报时间
                      </th>
                      <th>
                         事件来源
                      </th>
                      <th>
                         派工状态
                      </th>
                      <th>
                         派工方式
                      </th>
                      <th>
                         指派人员
                      </th>
                      
                      <th>
                         功能操作
                      </th>
                    </tr>
                  </thead>
                  <tbody>

                  <tr class="odd gradeX" v-for="(item,index) in list">
                    <td>
                      <input type="checkbox" class="checkboxes" value="1" @click="checkT(item,index)"/>
                    </td>
                    <td>
                       {{item.number}}
                    </td>
                    <td>
                       {{item.lb}}
                    </td>
                    <td>
                       {{item.name}}
                    </td>
                    <td>
                       {{item.sbid}}
                    </td>
                    <td>
                       {{item.address}}
                    </td>
                    <td>
                       {{item.rydl}}
                    </td>
                    
                    <td>
                      {{item.yydl}}
                    </td>
                     <td v-if="item.type==1">
                       正常
                    </td>
                    <td v-if="item.type==0" class="warn" style="color: #ff3300">
                       告警
                    </td>
                    <td>
                      <a data-toggle="modal" style="color:#5b9bd1" href="#lookinfor" @click="lookData($data,index)">
                        详情
                      </a> |
                      <a data-toggle="modal" style="color:#5b9bd1" href="#sureQd" @click="lookSb($data,index)">
                        抢单
                      </a> |
                      <a data-toggle="modal" style="color:#5b9bd1" href="#setFz" @click="lookSb($data,index)">
                        删除
                      </a>
                    </td>
                  </tr>
                
                  </tbody>
                </table>
                  <!--无数据提示开始-->
                <transition name="fade">
                  <NotConTip :showTip.sync="showTip" :tipText="tipText"></NotConTip>
                </transition>
                <!--无数据提示结束-->
                <div class="undefinedbootstrap_full_number">
                  <span class="dataTotal">
                    共 <span class="numData">{{pageNum}}</span> 页 　  
                  </span>
                  <ul class="pagination" style="visibility: visible;">
                    <li class="prev disabled" @click="firstFlag && firstPage()">
                      <a title="第一">首页</i></a>
                    </li>
                    <li class="prev disabled" @click="prevFlag && prevPage($event)">
                      <a title="上一页"><i class="fa fa-angle-left"></i></a>
                    </li>
                    <li v-for="(item,index) in page" :class="{active:index==(number),block:((min<=index)&&(index<max))}" class="pageLi" @click="nowFlag && nowPage(index)">
                        <a>{{index+1}}</a>
                    </li>
                    <li class="next" :class="{disabled:pageNum<=1}" @click="nextFlag && nextPage($event)">
                      <a title="下一个"><i class="fa fa-angle-right"></i></a>
                    </li>
                    <li class="next" :class="{disabled:pageNum<=1}" @click="lastFlag && lastPage()">
                      <a title="持续">尾页</a>
                    </li>
                      
                  </ul>
                  <span class="dataTotal">
                    每页显示 <span class="numData">{{page_size}}</span> 条数据 　  
                  </span>
                  <span class="dataTotal">
                    跳转至 <input type="text" value="page_num" style="border:1px solid #dbdbdb;font-size: 14px;color:#333;width: 50px;padding: 5px 10px;text-align: center;" v-model="page_num"> 页 　  
                  </span>
                  <button class="btn green" @click="toPage()" style="position: relative;top: -22px;padding: 5px 14px;">跳转
                  </button>
                </div>
                </div>
            </div>
          </div>
          <!-- END EXAMPLE TABLE PORTLET-->
        </div>
      </div>
     

      <!-- 新增设备信息开始 -->
      <div id="addData" class="modal fade" tabindex="-1" data-width="1024">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
          <h4 class="modal-title">新增用户报修记录</h4>
        </div>
        <div class="modal-body">
          <div class="row m10">
            <div class="col-md-6">

              <div class="row">
                <div class="col-md-3">
                  报修类型 :
                </div>
                <div class="col-md-9">
                  <select class="bs-select form-control" style="margin-right: 25px;">
                    <option selected="" value="全部">工区报修</option>
                    <option value="">工区报修</option>
                  </select>
                </div>
              </div>
              <div class="row">
                <div class="col-md-3">
                  报修类别 :
                </div>
                <div class="col-md-9">
                  <select class="bs-select form-control" style="margin-right: 25px;">
                    <option selected="" value="全部">路灯</option>
                    <option value="">路灯</option>
                  </select>
                </div>
              </div>
              <div class="row">
                <div class="col-md-3">
                  上报时间 :
                </div>
                <div class="col-md-9">
                  <input class="form-control form-control-inline date-picker" placeholder="请输入设备生产日期" type="text">
                </div>
              </div>


              <div class="row">
                <div class="col-md-3">
                  事件来源 :
                </div>
                <div class="col-md-9">
                  <select class="bs-select form-control" style="margin-right: 25px;">
                    <option selected="" value="全部">APP</option>
                    <option value="">APP</option>
                  </select>
                </div>
              </div>
              <div class="row">
                <div class="col-md-3">
                 小区房号 :
                </div>
                <div class="col-md-9">
                  <select class="bs-select form-control" style="margin-right: 25px;">
                    <option selected="" value="全部">4栋3-11</option>
                    <option value="">4栋3-11</option>
                  </select>
                </div>
              </div>



              <div class="row">
                <div class="col-md-3">
                  详细地址 :
                </div>
                <div class="col-md-9">
                  <input class="form-control" placeholder="请输入详细地址" type="text">
                </div>
              </div>

              

              
            </div>
            <div class="col-md-6">
             <div class="row">
                <div class="col-md-3">
                  联系方式 :
                </div>
                <div class="col-md-9">
                  <input class="form-control" placeholder="请输入联系方式" type="text">
                </div>
              </div>

              <div class="row">
                <div class="col-md-3">
                  负责人 :
                </div>
                <div class="col-md-9">
                  <select class="bs-select form-control" style="margin-right: 25px;">
                    <option selected="" value="全部">地区一</option>
                    <option value="">地区二</option>
                  </select>
                </div>
              </div>

              <div class="row">
                <div class="col-md-3">
                  处理人员 :
                </div>
                <div class="col-md-9">
                  <select class="bs-select form-control" style="margin-right: 25px;">
                    <option selected="" value="全部">刘德高</option>
                    <option value="">刘德高</option>
                  </select>
                </div>
              </div>

              <div class="row">
                <div class="col-md-3">
                  处理等级 :
                </div>
                <div class="col-md-9">
                  <select class="bs-select form-control" style="margin-right: 25px;">
                    <option selected="" value="全部">高</option>
                    <option value="">高</option>
                  </select>
                </div>
              </div>
              
              <div class="row">
                <div class="col-md-3">
                  截至时间 :
                </div>
                <div class="col-md-9">
                  <input class="form-control form-control-inline date-picker" placeholder="请输入设备生产日期" type="text">
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="col-md-2" style="padding: 0;">
                处理意见 :
              </div>
              <div class="col-md-10" style="padding: 0;">
                <textarea class="form-control" rows="3" style="resize: none;" placeholder="备注"></textarea>
              </div>
             
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
          <button type="button" class="btn blue" @click="saveData">保存</button>
        </div>
      </div>              
      <!-- 新增设备信息结束 -->

      <!-- 查看详情设备信息开始 -->
      <div id="lookinfor" class="modal fade" tabindex="-1" data-width="1024">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
          <h4 class="modal-title">用户报修详情</h4>
        </div>
        <div class="modal-body" style="padding-top: 0;">
          <div class="row m10">
            <ul class="bsCz clearfix">
              <li class="active">报修信息</li>
              <li>现场核查</li>
              <li>处理进度</li>
              <li>用户评价反馈</li>
            </ul>

            <div class="bxxx active">
              <div class="col-md-6">

                <div class="row">
                  <div class="col-md-3">
                    报修类型 :
                  </div>
                  <div class="col-md-9">
                    工区报修
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3">
                    报修类别 :
                  </div>
                  <div class="col-md-9">
                    路灯
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3">
                    上报时间 :
                  </div>
                  <div class="col-md-9">
                    2017-9-22
                  </div>

                </div>
                <div class="row">
                  <div class="col-md-3">
                    是否逾期 :
                  </div>
                  
                  <div class="col-md-9">
                    APP
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-3">
                    事件来源 :
                  </div>
                  <div class="col-md-9">
                    APP
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3">
                   小区房号 :
                  </div>
                  <div class="col-md-9">
                    4栋3-11
                  </div>
                </div>



                <div class="row">
                  <div class="col-md-3">
                    详细地址 :
                  </div>
                  <div class="col-md-9">
                    请输入详细地址
                  </div>
                </div>
              </div>
              <div class="col-md-6">
               <div class="row">
                  <div class="col-md-3">
                    联系方式 :
                  </div>
                  <div class="col-md-9">
                    13678478463
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-3">
                    负责人 :
                  </div>
                  <div class="col-md-9">
                    张三
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3">
                    派工方式 :
                  </div>
                  <div class="col-md-9">
                    ss
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-3">
                    处理人员 :
                  </div>
                  <div class="col-md-9">
                    刘德高
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-3">
                    处理等级 :
                  </div>
                  <div class="col-md-9">
                    高
                  </div>
                </div>
                
                <div class="row">
                  <div class="col-md-3">
                    截至时间 :
                  </div>
                  <div class="col-md-9">
                    2017-9-25
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="col-md-2" style="padding: 0;">
                  处理意见 :
                </div>
                <div class="col-md-10" style="padding: 0;">
                  处理意见
                </div>
              </div>
            </div>

            <div class="bxxx">
              <div class="col-md-6">
                <div class="row">
                  <div class="col-md-3">
                    检查人员 :
                  </div>
                  <div class="col-md-9">
                    刘德高
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3">
                    核查日期 :
                  </div>
                  <div class="col-md-9">
                    2017-9-22
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3">
                    检查方式 :
                  </div>
                  <div class="col-md-9">
                    400客服
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3">
                    检查结果 :
                  </div>
                  <div class="col-md-9">
                    情况属实
                  </div>
                </div>

              </div>
              <div class="col-md-6">
                核查现场照片:
              </div>
              <div class="col-md-12">
                <div class="col-md-2" style="padding: 0;">
                  核查情况说明 :
                </div>
                <div class="col-md-10" style="padding: 0;">
                  处理意见
                </div>
              </div>
            </div>
            <div class="bxxx">
              <div class="col-md-6">
                <div class="row">
                  <div class="col-md-3">
                    处理人员 :
                  </div>
                  <div class="col-md-9">
                    刘德高
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3">
                    制定完成日期 :
                  </div>
                  <div class="col-md-9">
                    2017-9-22
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3">
                    是否逾期 :
                  </div>
                  <div class="col-md-9">
                    400客服
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3">
                    检查结果 :
                  </div>
                  <div class="col-md-9">
                    情况属实
                  </div>
                </div>

              </div>
              <div class="col-md-6">
                核查现场照片:
              </div>
              <div class="col-md-12">
                <div class="col-md-2" style="padding: 0;">
                  处理信息记录 :
                </div>
                <div class="col-md-10" style="padding: 0;">
                  处理意见
                </div>
              </div>
            </div>
            <div class="bxxx">
              <div class="col-md-6">
                <div class="row">
                  <div class="col-md-3">
                    处理状态 :
                  </div>
                  <div class="col-md-9">
                    刘德高
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3">
                    用户评价状态 :
                  </div>
                  <div class="col-md-9">
                    2017-9-22
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3">
                    用户评分 :
                  </div>
                  <div class="col-md-9">
                    400客服
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="col-md-2" style="padding: 0;">
                  用户评价内容 :
                </div>
                <div class="col-md-10" style="padding: 0;">
                  处理情况还算好，基本
                </div>
              </div>
            </div>


          </div>
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
          <button type="button" class="btn blue" @click="saveData">保存</button>
        </div>
      </div>              
      <!-- 查看详情设备信息结束 -->

      <!-- 发布抢单弹框开始 -->
      <div id="sureQd" class="modal fade" tabindex="-1" >
        <div class="modal-title">
          <p>
             发布抢单
          </p>
        </div>
        <div class="modal-body">
          <p style="color: #ff3300;font-weight: 500;">
              确定发布 公区报修事件  1001 为抢单，抢单时间为10分钟，在抢单时间内员工通过APP完成抢单操作。
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
          <button type="button" data-dismiss="modal" @click="sureDelete" class="btn blue">确定</button>
        </div>
      </div>
      <!-- 发布抢单弹框结束 -->

    

  </div>

</template>  

<style scoped>
    .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .row.center .col-md-3{text-align: center;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.m10 .col-md-12 .col-md-2,.row .col-md-9{color: #666;font-weight: 500;}
    p {margin: 0 0 10px;}
    .row.center .col-md-6{text-align: left;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.center .col-md-6 input{border: 1px solid #dbdbdb;width: 50px;padding-left: 5px;color: #333;font-weight: 500;}
    table tr td{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 100%;display: inline-block;}
    .search button{position: relative;top: -2px;color: #fff;}
    .imgDiv img{width: 100%;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .row.color span{color: #333;font-weight: 500;}
    .row.m0{margin: 0;}
       .row.m10 .col-md-6 >div{margin-bottom: 10px;}
    .row.m10 .col-md-6 .col-md-3{position: relative;top: 6px;color: #333;font-weight: 500;}
     @media (max-width: 768px){
    .cz{margin-bottom: 0px;}
    .dataTotal{top: -5px;}
    .bs-select{width: 60%;}
  }
</style>

<script>
  import '../../../../../static/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js';
  import Metronic from '../../../../../static/global/js/metronic.js'
  import {check,Tips} from '../../../../../static/js/pages/tips.js';
  import ComponentsPickers from '../../../../../static/js/pages/components-pickers.js';
  import Headers from '../../../../components/Headers.vue';
  import Bars from '../../../../components/Bars.vue';
  import Foot from '../../../../components/Foot.vue';
  import NotConTip from '../../../../components/noConTip.vue'
  import optVue from '../../../../config/optVue.js';
  export default {
     data(){
      return{
         list:[],
        page: [], //页码数组
        tipText:"暂无数据",
        showTip:false,
        total:null, //总条数  
        lookObj:{},
        modifyNum:{},
        title:"",
        glNum:6,
        glNumChild:2,
        pageNum: null, //页数
        page_size: null, //每页显示多少条
        page_num: null, //当前页码
        dataObj:{}, // json对象
        number:0,
        min:Number,
        firstFlag:false,
        prevFlag:false,
        nowFlag:true,
        nextFlag:true,
        lastFlag:true,
        max:5,
        maxNum:5,
        id:null,
        index:null
      }
    },
    components: {
        Headers,Bars,Foot,NotConTip
    },
    mounted(){
      document.title = '系统派单';
      var that = this;
      this.title = document.title
      optVue.xtpd(this);
      this.showPageindex(0,this.maxNum,0)
      $(function(){
        ComponentsPickers.init();
         /*全选反选*/
        check.init($(".table-checkbox"),$(".checkboxes"));
       

        $(".bsCz li").each(function(i){
          $(this).on("click",function(){
            $(this).addClass("active");
            $(this).siblings("li").removeClass("active");
            $(".bxxx").eq(i).addClass("active");
            $(".bxxx").eq(i).siblings(".bxxx").removeClass("active");
          })
        })
        


      })
    },
    methods:{
      deleteData:function (index,data,event) {
        this.data = data;
        this.index = index;
      
      },
      lookData:function(){

      },
      lookSb:function(data,index){
        this.lookObj = data.list[index]
      },
        saveData:function(){
        
      },
      sureDelete:function(){

      },
      showPageindex : function(min, max, index) {   
            if (index <= Math.ceil(max / 2)) {

                var min = 0;
                var max = max;

            }
           else if (this.pageNum - index < Math.ceil(max / 2)) {
              var min = this.pageNum - max;
              var max = this.pageNum ;

            } 
            else{
              var min = Math.ceil(index - max / 2)-1;
              var max = index + Math.ceil(max / 2)-1;
            }
            this.min = min;
            this.max = max;
      },
      nowPage:function(index){

        if(this.pageNum<=1){
          return;
        }
        this.number = index;
        if(this.number == 0){
          $(".prev").addClass("disabled");
          $(".next").removeClass("disabled");
          this.firstFlag = false;
          this.prevFlag = false;
          this.lastFlag = true;
          this.nextFlag = true;
        }
        else if(this.pageNum-1 == this.number){
          $(".next").addClass("disabled");
          $(".prev").removeClass("disabled");
          this.firstFlag = true;
          this.prevFlag = true;
          this.lastFlag = false;
          this.nextFlag = false;
        }
        else{
          this.firstFlag = true;
          this.prevFlag = true;
          this.lastFlag = true;
          this.nextFlag = true;
          $(".next").removeClass("disabled");
          $(".prev").removeClass("disabled");
        }
        $(".table-checkbox").closest("table").find(".checkboxes").prop({checked:false})
        

        this.showPageindex(0,this.maxNum,this.number+1);
        var pageArr = {
          page_num : this.number+1
        }
        optVue.xqglNowPag(this,pageArr);
        
      },
      nextPage:function(el){
        if(this.pageNum<=1){
          return;
        }

        $(".prev").removeClass("disabled");
        if(this.pageNum == this.number+2){

          $(".next").addClass("disabled");

        }
        if(this.pageNum == this.number+1){
          this.firstFlag = true;
          this.prevFlag = true;
          this.lastFlag = false;
          this.nextFlag = false;
          return false;
        }
        this.firstFlag = true;
        this.prevFlag = true;
        this.lastFlag = true;
        this.nextFlag = true;
        this.number++;
        this.showPageindex(0,this.maxNum,this.number+1);
        var pageArr = {
          page_num : this.number+1
        }
        optVue.xqglNowPag(this,pageArr);
      },
      prevPage:function(el){
        if(this.pageNum<=1){
          return;
        }
        $(".next").removeClass("disabled");
        if(this.number == 1){
          $(".prev").addClass("disabled");
          
        }
        if(this.number == 0){
          this.firstFlag = false;
          this.prevFlag = false;
          this.lastFlag = true;
          this.nextFlag = true;
          return false;
        }
        this.firstFlag = true;
        this.prevFlag = true;
        this.lastFlag = true;
        this.nextFlag = true;
        this.number--;
        this.showPageindex(0,this.maxNum,this.number+1);
        //var pageArr = 
        var pageArr = {
          page_num : this.number+1
        }
        optVue.xqglNowPag(this,pageArr);
      },
      lastPage:function(){
        if(this.pageNum<=1){
          return;
        }
        $(".next").addClass("disabled");
        $(".prev").removeClass("disabled");
        this.number = this.pageNum-1;
        this.showPageindex(0,this.maxNum,this.number)
        var pageArr = {
          page_num : this.pageNum
        }
        optVue.xqglNowPag(this,pageArr);
        this.firstFlag = true;
        this.prevFlag = true;
        this.lastFlag = false;
        this.nextFlag = false;
       
      },
      firstPage:function(){
        if(this.pageNum<=1){
          return;
        }

        $(".prev").addClass("disabled");
        $(".next").removeClass("disabled");
        this.number = 0;
        this.showPageindex(0,this.maxNum,this.number)
        var pageArr = {
          page_num : this.number+1
        }
        optVue.xqglNowPag(this,pageArr);
        this.firstFlag = false;
        this.prevFlag = false;
        this.lastFlag = true;
        this.nextFlag = true;
      },
      toPage:function(){
        var pageArr = {
          page_num : this.page_num
        }
        this.number = this.page_num-1;
        optVue.xqglNowPag(this,pageArr);
      }
    }

  }

</script>  



